<template>
  <div class="common-body">
    <!-- 面包屑 -->
    <breadcrumb
      :breadcrumbArr="breadcrumbArr"
      :breadcrumbLastItem="breadcrumbLastItem"
      state="detail"
      @handleBack="handleBack"
    />

    <div
      v-if="isTrue"
      :class="[
        contractState ? 'ccui-app-container-detail' : 'detail-box',
        'ccui-clearfix'
      ]"
    >
      <!--  主体左侧内容  -->
      <div :class="[!contractState ? 'detail-info' : '']">
        <!--  审批状态 icon  -->
        <div v-if="!contractState" class="detail-info-el-Label">
          <el-label :type="approving" v-if="approvingStatus"></el-label>
        </div>
        <div
          :class="[
            !contractState
              ? 'detail-info-form-container'
              : 'ccui-app-container-detail-body'
          ]"
        >
          <el-tabs v-model="activeName" class="el-tabs__customize">
            <el-tab-pane label="基本信息" name="a">
              <el-group-title class="d_jump">
                <template slot="groupTitle">
                  <el-form
                    :model="form"
                    ref="basicInfo"
                    label-width="160px"
                    class="ccui-form"
                  >
                    <el-col
                      v-for="(item, index) in basicInfo"
                      :span="item.colSpan || 12"
                      :key="index"
                    >
                      <el-form-item
                        :label="item.label + '：'"
                        class="remarkClass"
                        :title="basicInfoObj[item.value]"
                        >{{ basicInfoObj[item.value] }}
                      </el-form-item>
                    </el-col>
                  </el-form>
                </template>
              </el-group-title>
            </el-tab-pane>

            <el-tab-pane label="采购清单" name="b">
              <div class="ccui-multifunctional-table-wrapper">
                <el-table
                  :data="tableData"
                  max-height="525"
                  ref="tableList"
                  border
                  :summary-method="getSummaries"
                  show-summary
                >
                  <el-table-column
                    v-for="(item, i) in tableColumnList"
                    :label="item.label"
                    :fixed="item.fixed"
                    :type="item.type"
                    :prop="item.prop"
                    :header-align="item.headerAlign || 'left'"
                    :align="item.align"
                    :min-width="item.width"
                    :key="i"
                    :show-overflow-tooltip="true"
                  >
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>

            <el-tab-pane label="附件" name="fouth" class="file-group">
              <fileInfo
                ref="fileInfo"
                v-model="fileList"
                state="detail"
              ></fileInfo>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <!--  右边审批状态  -->
      <approval-read-record
        v-if="!contractState"
        :approvalRecordData="approvalRecordData"
      />
    </div>

    <!--  底部导航栏及签名导出  -->
    <bottomGuide
      v-if="isTrue"
      busiType="116"
      pageType="exwarehousewriteoff/detailExport"
      :approvalStatus="approving"
      :curPageId="$route.query.id"
      :businessCode="businessCode"
      @handleBack="handleBack"
    />
  </div>
</template>

<script>
import publicComponent from "@/basa/components/public";
import fileInfo from "@/basa/components/public/uploadInfo2";
import js from "../js";
import { getExwarehouseWriteOff } from "../api";

export default {
  name: "item_detail",
  components: {
    approvalReadRecord: publicComponent.approvalRecord,
    breadcrumb: publicComponent.breadcrumb,
    bottomGuide: publicComponent.bottomGuide,
    fileInfo
  },
  data() {
    return {
      businessCode: "",
      downloadUrl: this.$addUrlPerFix(process.env.VUE_APP_BASE_URL),
      breadcrumbArr: js.breadcrumbArr,
      breadcrumbLastItem: "",
      contractState: "",
      approving: "", // 审批状态
      approvingStatus: true, // 审批状态展示
      approvingType: {
        1: "approving", // 审批中
        2: "withdrawn", // 已撤回
        3: "approvaled", // 审批通过
        4: "sendback", // 审批退回
        5: "unapproval" // 审批不通过
      },
      isTrue: false,
      approvalRecordData: [],
      activeName: "a",
      fileList: [],
      form: {},
      basicInfoObj: {},
      basicInfo: [
        {
          label: "冲销原因",
          value: "writeoffReason",
          colSpan: 22,
          remarkClass: true,
          title: true
        },
        {
          label: "填报单位",
          value: "reportInOrgName"
        },
        {
          label: "仓库",
          value: "warehouseName"
        },
        {
          label: "出库单编号",
          value: "exwarehouseCode"
        },
        {
          label: "分类名称",
          value: "categoryName"
        },
        {
          label: "冲销单编号",
          value: "writeoffCode"
        },
        {
          label: "冲销单名称",
          value: "writeoffName"
        },
        {
          label: "冲销数量",
          value: "exwarehouseCount"
        },
        {
          label: "冲销金额",
          value: "exwarehouseMoney"
        },
        {
          label: "编制日期",
          value: "reportTime"
        },
        {
          label: "编制人",
          value: "reportUsername"
        },
        {
          label: "备注",
          value: "remark",
          colSpan: 22,
          remarkClass: true,
          title: true
        }
      ],
      tableData: [],
      tableColumnList: [
        {
          type: "index",
          label: "序号",
          fixed: "left",
          width: "50"
        },
        {
          label: "批次号",
          prop: "batchNumber",
          width: "220"
        },
        {
          label: "设备物资编码",
          prop: "materialCode",
          width: "300"
        },
        {
          label: "设备物资名称",
          prop: "materialName",
          width: "300"
        },
        {
          label: "设备物资说明",
          prop: "materialState",
          width: "130"
        },
        {
          label: "分类名称",
          prop: "categoryName",
          width: "200"
        },
        {
          label: "计量单位",
          prop: "measureUnit"
        },
        {
          label: "库存数量",
          prop: "storageCount",
          width: "120"
        },
        {
          label: "冲销数量",
          prop: "exwarehouseCount",
          width: "120"
        },

        {
          label: "币种",
          prop: "currencyName"
        },
        {
          label: "汇率",
          prop: "exchangeRate"
        },
        {
          label: "含税单价",
          prop: "unitPriceWithTax",
          width: "140",
          align: "right"
        },
        {
          label: "冲销金额",
          prop: "exwarehouseMoney",
          width: "150",
          align: "right"
        },
        {
          label: "备注",
          prop: "remark"
        }
      ]
    };
  },
  methods: {
    getList() {
      getExwarehouseWriteOff({
        id: this.$route.query.id,
        isShowLoading: true
      }).then(res => {
        let result = res.data.data;
        this.contractState = !result.approveRecords.length;
        this.businessCode = result.exwarehouseWriteOffBO.writeoffCode;
        this.basicInfoObj = result.exwarehouseWriteOffBO;
        this.basicInfoObj.exwarehouseCount = (
          0 - this.basicInfoObj.exwarehouseCount
        ).toFixed(3);
        this.basicInfoObj.exwarehouseMoney = (
          0 - this.basicInfoObj.exwarehouseMoney
        ).toFixed(2);
        this.basicInfoObj.reportTime = this.basicInfoObj.reportTime.substring(
          0,
          this.basicInfoObj.reportTime.indexOf(" ")
        );
        this.breadcrumbLastItem = this.basicInfoObj.writeoffName;
        this.tableData = result.exwarehouseWriteOffBOList;
        this.tableData.forEach(item => {
          item.storageCount = (+item.storageCount).toFixed(3);
          item.exwarehouseCount = (0 - item.exwarehouseCount).toFixed(3);
          item.unitPriceWithTax = (+item.unitPriceWithTax).toFixed(2);
          item.exwarehouseMoney = (0 - item.exwarehouseMoney).toFixed(2);
        });
        this.fileList = result.exwarehouseWriteOffFiles;
        this.approvalRecordData = result.approveRecords;
        this.approvalRecordData.forEach(item => {
          if (item.operState === 0) {
            item.icon = "el-icon-time";
            item.color = "#F5A623";
          }
        });
        this.isTrue = true;
        this.approving = this.approvingType[this.basicInfoObj.approvalStatus];
        this.approvingStatus = false;
        this.$nextTick(() => {
          this.approvingStatus = true;
        });
      });
    },

    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
        }
        const values = data.map(item => +item[column.property]);

        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((pre, curr) => {
            const value = +curr;
            if (!isNaN(value)) {
              if (column.property === "exwarehouseCount") {
                return new this.$BigNumber(+pre).plus(+curr).toFixed(3);
              } else if (column.property === "exwarehouseMoney") {
                return new this.$BigNumber(+pre).plus(+curr).toFixed(2);
              }
            } else {
              return pre;
            }
          }, 0);
        }
      });
      return sums;
    },

    handleBack() {
      this.$router.push("/inventoryManagement/outBound/all");
    }
  },
  activated() {
    this.activeName = "a";
    this.getList();
  },
  beforeRouteLeave(to, from, next) {
    this.isTrue = false;
    next();
  }
};
</script>

<style scoped lang="scss">
.remarkClass {
  /deep/ .el-form-item__content {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    white-space: normal;
    word-break: break-all;
    word-wrap: break-word !important;
  }
}

/deep/ .ccui-multifunctional-table-wrapper {
  .el-table td,
  .el-table th.is-leaf {
    border-right: 1px solid #edf2fc;
  }
}

/deep/
  .ccui-multifunctional-table-wrapper
  .el-table
  tbody
  tr
  td:nth-child(2)
  .cell {
  border-right: 1px solid #f1f1f1;
}

/deep/
  .ccui-multifunctional-table-wrapper
  .el-table
  tbody
  tr
  td:first-child
  .cell {
  border-right: 1px solid #f1f1f1;
}

/deep/ .el-table__footer-wrapper {
  margin-top: 0px;
}

/deep/ .el-table .cell {
  width: 100% !important;
}

// 解决表格定位滚动条无法拖动
/deep/ .el-table__fixed-header-wrapper {
  th {
    pointer-events: auto;
  }
}

/deep/ .el-table__fixed,
/deep/ .el-table__fixed-right {
  pointer-events: none;

  td {
    pointer-events: auto;
  }
}

/deep/ .el-tabs__customize {
  padding-bottom: 50px;
}
</style>
